<template>
  <div class="login-view">
    <!--  背景  -->
    <div ref="login_bg" style="width: 45%">
    </div>
    <div class="site-wrapper site-page--login">
      <div class="site-content__wrapper">
        <div class="site-content">
          <div class="login-main">
            <h3 class="login-title">登录</h3>
            <el-form :model="dataForm" :rules="dataRule" ref="ruleFormRef"
                     @keyup.enter.native="dataFormSubmit(ruleFormRef)"
                     status-icon>
              <el-form-item prop="username">
                <el-input v-model="dataForm.username" placeholder="帐号"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="dataForm.password" type="password" placeholder="密码" show-password></el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit(ruleFormRef)">登录</el-button>
                <span style="margin-left: 15px">
                  <el-text class="mx-1" type="info">没有账号？</el-text>
                  <el-link type="primary" :underline="false" href="register">前往注册</el-link>
                </span>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import useStore from '@/store/index'
import {onMounted, reactive, ref, toRaw} from 'vue';
import login_bg_json from "@/assets/img/login_bg/data.json";
import lottie from "lottie-web";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import router from "@/router";

const {userStore} = useStore()

const login_bg = ref(null)

onMounted(() => {
  // 渲染动画
  lottie.loadAnimation({
    //选择渲染dom
    container: login_bg.value,
    //渲染格式
    renderer: "svg",
    //循环播放
    loop: true,
    //是否i自动播放
    autoplay: true,
    animationData: login_bg_json,
  });
})

const ruleFormRef = ref()

let dataForm = reactive({
  username: '',
  password: '',
})
let dataRule = {
  username: [
    {required: true, message: '帐号不能为空', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '密码不能为空', trigger: 'blur'}
  ],
}

// 提交表单
const dataFormSubmit = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      request.post('/user/login', toRaw(dataForm)).then((res) => {
        if (res.code === 200) {
          ElMessage.success(`${res.msg}`)
          // 登陆成功
          // 存储信息
          userStore.setUserInfo(res.data)
          // 前往首页
          router.push('/home')
        }
      }).catch((err) => {
        console.log("/user/login:", err);
      })
    } else {
      return false
    }
  })
}
</script>

<style lang="scss">
.site-wrapper.site-page--login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;

  &:before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background-size: cover;
  }

  .site-content__wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent;
    scrollbar-width: none;
    height: 100vh;
  }

  .site-content {
    min-height: 100%;
    padding: 10px 500px 30px 30px;
  }

  .login-main {
    position: absolute;
    top: 0;
    right: 0;
    padding: 150px 60px 180px;
    width: 470px;
    min-height: 100%;
    background-color: #fff;
  }

  .login-title {
    font-size: 16px;
    height: 40px;
  }

  .login-captcha {
    overflow: hidden;

    > img {
      width: 100%;
      cursor: pointer;
    }
  }

  .login-btn-submit {
    width: 65%;
    margin-top: 8px;
  }
}
</style>